  <template>
  <div>
    <div style="display: flex">
      <div style="flex: 1">
        <h1 style="padding: 0; margin: 0%; height: 50px; line-height: 50px">
          欢迎来到后台管理系统
        </h1>
        <h2 style="padding: 0; margin: 0%; height: 40px; line-height: 40px">
          系统公告
        </h2>
        <div class="notice" style="">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item
              v-for="item in noticeList"
              :key="item.id"
              :name="item.id"
              :title="item.name"
            >
              <div>{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse>
          <!-- `饼图 -->
          <div style="width: 100%">
            <div style="width: 100%; height: 400px" id="pie"></div>
          </div>
        </div>
      </div>
      <div style=" display: flex; flex-direction: column; flex: 1">
        <!-- 图书统计（柱状图） -->
        <div style="width: 100%">
          <div style="width: 100%; height: 400px" id="bar"></div>
        </div>
        <!-- 图书统计（折线图） -->
        <div style="width: 100%">
          <div style="width: 100%; height: 400px" id="line"></div>
        </div>
      </div>
      
    </div>
    <div>从零搭建一个后台管理系统（基于springboot+vue）</div>
  </div>
</template>

<script>
import { findAllNotice } from "@/api/sys/notice";
import { getBookChartPie, getBookChartBar } from "@/api/sys/book";
import * as echarts from "echarts";
export default {
  name: "home",
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      activeName: "", //当前选中的公告
      noticeList: [], //公告列表
    };
  },
  mounted() {
    this.getAllNotice();
    this.getChartDatas(); //获取饼图数据
    this.getChartDatas2(); //获取柱状图数据
  },
  created() {},
  methods: {
    async getAllNotice() {
      const res = await findAllNotice(this.params);
      if (res.code === 200) {
        this.noticeList = res.data.list || [];
        this.activeName = this.noticeList[0].id; //默认选中第一条
      } else {
        this.$message.error(res.message);
      }
    },
    //获取图表数据
    async getChartDatas() {
      const res = await getBookChartPie();
      if (res.code === 200) {
        this.initChart(res.data);
      } else {
        this.$message.error(res.message);
      }
    },
    //获取图表数据(柱状图)
    async getChartDatas2() {
      const res = await getBookChartBar();
      if (res.code === 200) {
        this.initChart2(res.data);
        this.initChart3(res.data);
      } else {
        this.$message.error(res.message);
      }
    },

    initChart(data) {
      let chartDom = document.getElementById("pie");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "图书统计（饼图）",
          subtext: "统计维度：图书分类",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "图书分类", //
            type: "pie",
            radius: "50%",
            data: data || [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initChart2(data) {
      let chartDom = document.getElementById("bar");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "图书统计(柱状图)",
          subtext: "统计纬度：图书分类",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: data.xAxis || [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "60%",
            data: data.yAxis || [],
          },
        ],
      };

      option && myChart.setOption(option);
    },

    initChart3(data) {
      let chartDom = document.getElementById("line");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "图书统计（折线图）",
          subtext: "统计纬度：图书分类",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: data.xAxis || [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.yAxis || [],
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
